<!DOCTYPE html>
<html>
<head>
    <script src="./vue3.4.21.js"></script>
</head>
<style>
    #message{
        color:red;
    }
</style>
<body>
    <h1>案例1 登录框</h1>
    <div id="app">
        <h3 id="message">{{message}}</h3>
        用户名：<input type="text" v-model="username"> <br>
        密码：<input type="password" v-model="password"> <br>
        <button @click="login">登录</button>
    </div>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    username:'',
                    password:'',
                    message:''
                }
            },
            methods:{
                login(){
                    if(this.username == ""){
                        this.message = '用户名不允许为空'
                        return;
                    }
                    if(this.password == ""){
                        this.message = '密码不允许为空'
                        return;
                    }
                    if(!/^.{6,20}$/.test(this.password)){
                        this.message = '密码长度必须是6-20位'
                        return;
                    }

                    //真正去提交表单
                    this.message = "验证通过"
                }
            }
        }).mount("#app");
    </script>
</body>
</html>